<template>
	<view class="container" :style="{height: clientHeight +'px'}">
		<view :style="{height: clientHeight +'px'}" class="left">
			<view class="left-list" v-for="(item,index) in typeList" @click="toIndex(index,item)" :key="index" :style="{backgroundColor:item.isTrue?'white':'#f5f5f5'}">
				{{item.name}}
			</view>
		</view>
		<view :style="{height: clientHeight +'px'}" class="right">
			<view class="good" v-for="(item,index) in goodsList" @click="toDetail(item)">
				<image :src="item.thumb" mode="aspectFill" style="width: 240rpx;height: 240rpx;"></image>
				<view style="height: 16rpx;">
					
				</view>
				<text style="font-weight: bold;font-size: 30rpx;">{{item.name}}</text>
				<view style="height: 16rpx;">
					
				</view>
				<view style="display: flex;font-size: 22rpx;color: #999;align-items: center;">
					<!-- <image src="../../../static/home/weizhi.png" style="width: 26rpx;height: 26rpx;border-radius: 7px 7px 0 0;"></image> -->
					<view style="width:10rpx;"></view>
					<text>{{item.store_name}}</text>
				</view>
				<view style="height: 16rpx;">
				</view>
				<view style="display: flex;align-items: center;">
					<text style="color: #FF5C5C;font-size: 30rpx;font-weight: bold;">{{item.real_shop_price}}</text>
					<view style="width: 10rpx;">	
					</view>
					<text style="font-size: 24rpx;color: #999;text-decoration:line-through;">{{item.market_price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				clientHeight:"",
				typeList:[],
				lat:"",
				lng:"",
				goodsList:[],
				index:0,
				cid:''
			}
		},
		watch:{
			typeList:{
				handler(newVal, oldVal) {
				        console.log('User object changed:', newVal, oldVal);
				},
				deep: true
			}
		},
		onShow() {
			// uni.removeStorageSync("index")
			if(uni.getStorageSync("index")){
				this.index = uni.getStorageSync("index")
				this.cid = uni.getStorageSync("cid")
				console.log(this.index)
				console.log(this.cid)
				// this.getListData()
				this.getGoodsList(this.cid,0)
				uni.removeStorage({key: 'index'})
				console.log('.1231')
			}else{
				this.getGoodsList(0,2)
				console.log('12321//')
			}
		},
		onLoad() {
			this.getsWindowInfo()
			this.getListData()
		},
		methods:{
			getsWindowInfo(){
				this.clientHeight = wx.getSystemInfoSync().windowHeight 
				console.log(this.clientHeight)
			},
			toIndex(index,ele){
				console.log(index,"index")
				console.log(ele,"ele")
				this.typeList.map((item)=>{
					item.isTrue = false
				})
				this.typeList[index].isTrue =  true
				// this.getGoodsList(ele.id,0)
				if(index==1 || index ==0){
					console.log("eee")
					this.getGoodsList(0,ele.id)
				}else {
					console.log("eee22")
					this.getGoodsList(ele.id,0)
				}
				this.$forceUpdate()
			},
			getListData() {
				let data = {
					max_level: 1
				}
				this.$api.get(global.apiUrls.post5da6e49d7373a, data)
					.then(res => {
						if (res.data.code == 1) {
							data = res.data.data;
							// this.goodsServiceLabel = data.goodsServiceLabel;
							// this.brandList = data;
							
							let lists = [
								{
									id: 2,
									type:1,
									name: '爆款推荐'
								},
								{
									id: 4,
									type:1,
									name: '最新发布'
								}
							]
							this.typeList = [...lists,...data]
							// this.typeList = [...data]
							this.typeList.map((item)=>{
								item.isTrue = false
							})
							this.typeList[this.index].isTrue = true
							console.log(this.typeList)
							// this.allTypeList = data.typeList
						} else {
							this.$message.error(res.data.msg);
						}
					})
			},
			toDetail(info) {
				this.$emit('onClick')
				this.$urouter.navigateTo({
				  url: '/pages/goods/goodsdetail/goods-detail/index',
				  params: {
				    sku_id: info.sku_id || 0,
				    goods_id: info.id
				  }
				});
			},
			getGoodsList(cid = 0,goods_type = 1) {
				console.log("d")
				this.$api.post(global.apiUrls.post5db113922d297, {
					cid: cid,
					page: 1,
					list_rows: 100,
					is_goods_type: 1,
					goods_type:goods_type,
					lng: this.lng,
					lat: this.lat
				}).then( res => {
					if (res.data.code == 1) {
						this.goodsList = res.data.data.data	
					}
				})
			},
		}
	}
</script>

<style  lang="scss" scoped>
	.left {
		overflow-y:auto;
		width: 20%;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;
		.left-list{
			padding: 20rpx;
			width: 100%;
		}
	}
	.right {
		padding-top: 20rpx;
		width: 80%;
		background-color: #ffffff;
		display: grid;
		grid-template-columns: repeat(2, 220rpx);
		gap: 10px;
		grid-auto-rows: min-content;
		justify-content: space-around;
		overflow-y:auto;
	}
	.container {
		display: flex;
		background-color: #ffffff;
	}
	.good{
		border-radius: 7rpx;
		width: 240rpx;
		height: 390rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 15rpx;
	}
</style>